#posts-root
    display flex
    flex-direction column
    align-items center
    margin-right: 2em

    #post-container
        width 50em
        margin-top 2em
        background-color var(--index-post-bg)
        border-radius 0.6em
        box-shadow 0.2em 0.2em 0.3em var(--global-shadow)

        h1, h2, h3, h4, h5, h6 
            margin 0.3em 0
            padding 0
            font-weight bold
            line-height 1.5
            code 
                font-size 0.95em

        h1 
            font-size 1.5em
        
        h2 
            font-size 1.4em
        
        h3 
            font-size 1.3em
        
        h4 
            font-size 1.2em
        
        h5, h6 
            font-size 1.1em
        
        h6 
            font-weight normal
        

        p 
            text-align left
            display block
            margin 1.5em 0

        ul, ol 
            padding-left 20px
            margin 1.5em 0

        li
            margin 0.5em 0

        a 
            text-decoration none
            outline none
            border 0
            cursor pointer 
            color: var(--link-blue)

        hr 
            margin 40px 0
            height 3px
            border none
            background-color #ddd
            background-image repeating-linear-gradient(
                -45deg,
                white,
                white 4px,
                transparent 4px,
                transparent 8px
            )

        dt 
            font-weight bold
        
        dd 
            margin 0
            padding 0
        

        kbd 
            border 1px solid #ccc
            border-radius 0.2em
            background-color #f9f9f9
            font-family inherit
            background-image linear-gradient(top #eee white #eee)
            padding 0.1em 0.3em
            white-space nowrap       

        img 
            display: flex
            flex-direction: row
            justify-content: center
            margin auto
            max-width 100%
            height auto
        
        pre 
            padding 0.5em
            overflow auto

        code
            padding: 0 5px;
            border: 1px dotted #666;

        #post-readmore
            margin 1em
            color $link-blue
            text-decoration underline

        #post-summary
            width 100%
            padding: 0 1.5em 1.5em 1.5em
            background-color var(--index-post-bg)
            color var(--global-font-color)
            border-bottom-left-radius 0.4em
            border-bottom-right-radius 0.4em
            box-sizing border-box

        @media screen and (min-width: 680px) and (max-width: 1080px)
            width: 30em

        @media screen and (max-width: 680px)
            width: 100%

    @media screen and (min-width: 680px) and (max-width: 1080px)
            margin: 0

    @media screen and (max-width: 680px)
            margin: 0 1em

#post-title
    width auto
    color var(--widget-font-color)
    border-radius 0.4em
    margin 1em 1.5em 0 1.5em
    padding 0.5em
    text-align center
    box-shadow 0 0.25em 0.2em var(--global-shadow)

    &:hover
        animation:titleScale 0.5s ease-out;
        -webkit-animation:titleScale 0.5s ease-out;

        @keyframes titleScale
            from {transform: scale(1)}
            to {transform: scale(1.1)}

        @-webkit-keyframes titleScale
            from {transform: scale(1)}
            to {transform: scale(1.1)}
        transform: scale(1.1)